<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 标签选择器-->
  <!-- <style>
    p{
      color: red;
    }
  </style> -->

  <!-- 
    类选择器 可以随心所欲地选
    首先，需要在CSS代码中，创建一个类名
    在对应的 html 代码中，通过 class 属性来引用这个类名
    此时具有该类名的元素，都会应用上相关的 CSS 属性
  -->
  <!-- <style>
    /* 开头的是 CSS 中的类名 */
    .blue {
      color: aqua;
    }
  </style> -->
  <!-- 使用 class 引入时不需要加点-->
  <!-- 
    <p class="blue">hello JAVA</p>
  <p>hello C++</p>
  <p class="blue">hello GO</p>
  <p>hello PYTHON</p> 
-->

  <!-- 
    id 选择器
    先给被选中的元素，设定个id属性
    （id在一个页面中，不能重复）
    因此id 选择器只能选中一个元素，不能选中多个 
  -->
  <!-- <style>
    #cpp {
      color: aqua;
    }
  </style>
  <p id="cpp">hello world</p> -->



  <!-- 通配符 选择器-->
  <!-- 取消默认样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>

</body>

</html>